<template>
  <div id="app" ref="app">
    <transition mode="out-in" :name="transitionName">
        <router-view></router-view>
      </transition> 
      <footPlayer v-if="footPlayer"></footPlayer>
  </div>
</template>



<script>
import { mapState,mapMutations } from "vuex";

export default {
  data(){
    return {
      flag:true,
      transitionName:"turn-on",
    }
  },
  methods:{
    ...mapMutations(['setPlayerBtm']),
  },
  computed: {
    ...mapState(["primary",'footPlayer','playerBtm','sxy']),
  },
  watch: {
    primary: function (v) {
      window.document.documentElement.setAttribute("data-theme", v);
    },
    '$route':function(to,from){
        if (parseInt(to.query._t) < parseInt(from.query._t)) {
            this.transitionName = 'turn-off';
        } else {
            this.transitionName = 'turn-on';
        }
    },
    playerBtm:function(v){
      console.log(v);
    }
  },
  mounted() {
    window.document.documentElement.setAttribute("data-theme", localStorage.getItem("primary"));
  },
};
</script>



<style lang="scss">
@import "@/assets/styles/allColor.scss";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  // background: $allColor;
  @include color_primary($color-primary3);
  @include background-color_primary($color-primary3);
  @include border-color_primary($color-primary3);
}

  @keyframes  turnon-enter{
      from{opacity: 0;transform: translateY(10%)}
      to{opacity: 1;transform: translateY(0%)}
  }

  @keyframes  turnon-leave{
      from{opacity: 1;transform: translateY(0%)}
      to{opacity: 0;transform: translateY(10%)}
  }

  .turn-on-enter-active,.turn-off-enter-active{
    animation: turnon-enter .4s;
  }

  .turn-on-leave-active,.turn-off-leave-active{
    animation: turnon-leave .4s;
  }

</style>
